<template>
	<view :style="goodstyle">
		<view class="swiper decorate" :style="'height:' + height + 'rpx;' + itemstyle">
			
			<swiper @change="changesilde" :indicator-dots="false" :style="'height:' + height + 'rpx;'" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, i) in mydata.imglist" :key="i">
					<view class="swiper-item">
						<vimage class="img_box" mode="widthFix" :style="'height:' + height + 'rpx;'" :src="item.url" ></vimage>
						</view>
				</swiper-item>
			</swiper>
			<view>
				<view v-if="mydata.type == 1" class="dots rectangle" :style="'justify-content:' + mydata.position">
					<view v-for="(item, i) in mydata.imglist" :key="i" :class="activeIndex == i ? 'dot active' : 'dot'" :style="'background:' + mydata.bg"></view>
				</view>
				<view v-if="mydata.type == 2" class="dots round" :style="'justify-content:' + mydata.position">
					<view v-for="(item, i) in mydata.imglist" :key="i" :class="activeIndex == i ? 'dot active' : 'dot'" :style="'background:' + mydata.bg"></view>
				</view>
				<text v-if="mydata.type == 3" :class="'number ' + mydata.position">{{ activeIndex + 1 }}/{{ mydata.imglist.length }}</text>
			</view>
		</view>
	</view>
</template>
<script>
import base from '@/common/baseUrl.js'
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},

	computed: {
		itemstyle() {
			return 'border-radius:' + this.mydata.r_t  + 'rpx ' + this.mydata.r_t  + 'rpx ' + this.mydata.r_b  + 'rpx ' + this.mydata.r_b  + 'rpx ';
		},
		goodstyle() {
			return 'padding: ' + this.mydata.p_t  + 'rpx ' + this.mydata.p_lr  + 'rpx ' + this.mydata.p_b  + 'rpx';
		}
	},
	data() {
		const _this = this;
		return {
			activeIndex: 0,
			height: '750',
			baseUrl:base.baseUrl
		};
	},
	methods: {
		changesilde(e) {
			 this.activeIndex=e.detail.current
		}
	},
	mounted() {
		// getImageInfo()
	}
};
</script>

<style lang="scss">
.swiper {
	overflow: hidden;
	.dots {
		position: absolute;
		display: flex;
		bottom: 9.77199px;
		box-sizing: border-box;
		padding: 0 14.65798px;
		left: 0;
		right: 0;
		justify-content: center;
		z-index: 1000;

		.dot {
			width: 6px;
			height: 6px;
			background: #fff;
			margin: 0 3px;
			opacity: 0.54;

			&.active {
				opacity: 1;
			}
		}

		&.round {
			.dot {
				border-radius: 50%;
			}
		}

		&.rectangle {
			.dot {
				width: 8px;
				height: 4px;
				border-radius: 4px;
				margin: 0 3px;
			}
		}
	}

	.number {
		position: absolute;
		display: flex;
		bottom: 9.77199px;
		box-sizing: border-box;
		justify-content: center;
		color: #fff;
		background: rgba(0, 0, 0, 0.54);
		border-radius: 22px;
		flex-direction: column;
		flex-direction: column;
		text-align: center;
		width: fit-content;
		min-width: 60rpx;
		font-size: 9px;
		line-height: 9px;
		padding: 3px 5px;
		right: 12px;
		z-index: 1000;

		&.flex-start {
			left: 12px;
		}

		&.flex-end {
			right: 12px;
		}
	}
}
</style>
